<template>
  <div class="lsc-mycenter-asset">
    <van-nav-bar
      title="财务管理"
      left-arrow
      @click-left="onClickBack"
    />
    <div class="lsc-mycenter-asset-header">
      <van-row>
        <van-col span="12"><van-icon name="pending-orders" /></van-col>
        <van-col span="12"><van-icon name="balance-details" /></van-col>
      </van-row>
      <van-row>
        <van-col span="12">总订单</van-col>
        <van-col span="12">总金额</van-col>
      </van-row>
      <van-row>
        <van-col span="12">{{finStatistics.orderCount}}</van-col>
        <van-col span="12">{{finStatistics.orderMoney}}</van-col>
      </van-row>
    </div>
    <div class="lsc-mycenter-asset-items">
      <van-row>
        <van-col span="6">未付款订单</van-col>
        <van-col span="6">未付款金额</van-col>
        <van-col span="6">已付款订单</van-col>
        <van-col span="6">帐户余额</van-col>
      </van-row>
      <van-row>
        <van-col span="6">{{finStatistics.nopayCount}}</van-col>
        <van-col span="6">{{finStatistics.nopayMoney}}</van-col>
        <van-col span="6">{{finStatistics.payCount}}</van-col>
        <van-col span="6">{{finStatistics.balance}}</van-col>
      </van-row>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
      <div class="lsc-mycenter-asset-base">
        <span>未付款订单</span>
        <van-row>
          <van-col span="12">订单号</van-col>
          <van-col span="8">订购时间</van-col>
          <van-col span="4">金额</van-col>
        </van-row>
        <van-row v-for="(item,index) in assetlist" :key="index">
          <van-col span="12">{{item.orderno}}</van-col>
          <van-col span="8">{{item.createtime}}</van-col>
          <van-col span="4">{{item.money}}</van-col>
        </van-row>
      </div>
    </van-list>
  </div>
</template>

<script>
import api from '../../api'

export default {
  name: 'asset',
  data () {
    return {
      finStatistics: {},
      assetlist: [],
      loading: false,
      finished: false,
      pageinfo: {
        pagesize: 10,
        pageindex: 0,
        total: 0
      }
    }
  },
  created() {
    this.getFinStatistics()
  },
  methods: {
    onClickBack() {
      this.$router.push('/mycenter')
    },
    getFinStatistics() {

      this.axios.get(api.agent.finStatistics)
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.finStatistics = res.data.data
          }
        })
    },
    onLoad() {
      this.loading = true;
      this.pageinfo.pageindex += 1
      setTimeout(()=>{
      this.axios.get(api.agent.nopayOrders, {params: this.pageinfo})
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.assetlist = res.data.data ? this.assetlist.concat(res.data.data) : []
            this.loading = false;
            if (this.assetlist.length >= res.data.pageinfo.total) {
              this.finished = true;
            }else {
              this.finished = false;
            }
          }
        })
      }, 500)

    }
  }
}
</script>

<style>

.lsc-mycenter-asset-header .van-icon-pending-orders:before,
.lsc-mycenter-asset-header .van-icon-balance-details:before {
  font-size: 25px;
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.lsc-mycenter-asset-header {
  padding: 20px;
  background: #c7a819;
  text-align: center;
  margin-bottom: 10px;
  color: #fff;
}
.lsc-mycenter-asset-items {
  padding-top: 20px;
  background: #fff;
  text-align: center;
  margin-bottom: 10px;
}
.lsc-mycenter-asset-items>div>div {
  padding-bottom: 10px;
}
.lsc-mycenter-asset-base {
  background: #fff;
  padding-bottom: 20px;
}
.lsc-mycenter-asset-base span {
  line-height: 40px;
  background: #e5e5e5;
  display: block;
  padding-left: 10px;
  font-size: 14px;
}
.lsc-mycenter-asset-base>.van-row {
  padding: 0 10px;
  margin-top: 15px;
}
</style>
